<template>
  <div class="main">
    <div class="main_box">
      <div class="aside">
        <!--<div class="bg_img">
           <img src="https://i.loli.net/2020/09/19/iMb5p2goWjAPUl3.jpg" alt="" />
           <img
            src="https://pic.rmb.bdstatic.com/bjh/d7d86a6801863fa8779052660bcf5e72.png"
            alt=""
          />
          <img src="https://pic.rmb.bdstatic.com/bjh/0d52feced483fde9f5b3c692a750fe23.jpeg" alt />
        </div>
        <div class="bg"></div>-->
        <left class="aside_left" ref="left" @changeDrawer="changeDrawer"></left>
      </div>
      <div class="el_right" id="el_right">
        <el-header>
          <div class="hleft">
            <search :position="position"></search>
          </div>
          <div class="hcenter">
            <div v-show="isHome">
              <span class="htitle iconfont icon-paixu"></span>
              <el-select v-model="value" @change="selectChange" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="hright">
            <div class="drawer" @click="changeDrawer">
              <span class="iconfont icon-gonggao"></span>
            </div>
            <div class="backend" @click="handleLogin">
              <span class="iconfont icon-houtai"></span>
              <span class="sdage" v-if="isLogin && mount > 0">{{ mount }}</span>
            </div>
            <div class="exit" @click="handleCancellation" v-if="getIsLogin">
              <span class="iconfont icon-tuichu"></span>
            </div>
          </div>
          <div class="htop">
            <div class="hsearch">
              <search :position="position"></search>
            </div>
            <div class="huser">
              <div class="title">
                <div class="s-name">{{ getAdmin.userName }}</div>
              </div>
              <div class="imgbox">
                <div class="userphoto">
                  <img :src="getAdmin.photo" alt />
                </div>
              </div>
            </div>
          </div>
          <div class="hbottom">
            <ul>
              <li>
                <router-link to="/main/home" tag="span">主页</router-link>
              </li>
              <li>
                <span @click="changeDrawer">公告</span>
              </li>
              <!-- <li>
                <router-link to="/module/message" tag="span">留言</router-link>
              </li>-->
              <li>
                <router-link to="/module/archive" tag="span">归档</router-link>
              </li>
              <li>
                <router-link to="/musichome" tag="span">音乐</router-link>
              </li>
            </ul>
          </div>
        </el-header>
        <el-main>
          <!-- <keep-alive include="archive,message">
            <router-view></router-view>
          </keep-alive>-->
          <home></home>
        </el-main>
      </div>
    </div>
    <!-- 抽屉：显示公告和归档 -->
    <el-drawer :visible.sync="drawer" :before-close="handleClose" :with-header="false">
      <my-scroll>
        <div
          class="timelinebox"
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
        >
          <h2>{{ drawertitle }}</h2>
          <el-timeline>
            <el-timeline-item
              v-for="(item, index) in annount"
              :key="index"
              :timestamp="item.date"
              placement="top"
              type="primary "
            >
              <el-card>
                <p>{{ item.content }}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </my-scroll>
    </el-drawer>
  </div>
</template>
<script>
import Left from './Left'
import Home from './home/Home'
import Search from '../../components/search/Search'
import { mapGetters } from 'vuex'

import request from '../../api/request'

export default {
  name: 'App',
  data() {
    return {
      position: 'left',
      imageUrl: '',
      userName: '',
      isHome: true,
      key: '',
      loading: true,
      isLogin: false,
      drawertitle: '公告',
      flag: true,
      drawer: false,
      annount: [], //储存公告的数组
      count: 0, //公告的数量
      showPlay: false, //Play组件的显示和隐藏
      options: [
        {
          value: '1',
          label: '按时间'
        },
        {
          value: '2',
          label: '按浏览量'
        }
      ],
      value: '1'
    }
  },
  watch: {
    // 检查路径控制后台管理按钮的显示与隐藏
    $route: function (newVal, oldVal) {
      if (newVal.path.includes('/home')) {
        this.isHome = true
      } else {
        this.isHome = false
      }
    }
  },
  async created() {
    // 文章的排序方式
    let sort = window.localStorage.getItem('sort')
    if (sort) {
      this.value = sort
    }
  },
  computed: {
    ...mapGetters(['getIsLogin', 'getUser', 'getAdmin']),
    mount: function () {
      return this.$store.getters.getReadMount
    }
  },
  mounted() {
    // 事件总线，监听登录状态，$emit 位于LoginPage.vue组件中
    this.$EventBus.$on('changeIsLogin', () => {
      this.isLogin = true
    })

    // // 监听页面刷新
    // window.onresize = function(e) {
    //   console.log(window.innerWidth, window.innerHeight)
    // }
  },
  components: {
    Left,
    Search,
    Home
  },
  methods: {
    // 关闭公告的抽屉
    handleClose(done) {
      done()
    },
    // 打开公告栏
    changeDrawer(args) {
      if (!this.annount.length) {
        this.getAnnount()
      }
      this.drawer = true
    },
    // 获取公告
    async getAnnount() {
      let res = await request({
        url: '/announcement/obtain',
        data: {},
        method: 'get'
      })
      this.annount = []
      let { data, status, count } = res
      if (status) {
        this.annount = Object.freeze(data)
        this.count = Object.freeze(count)
        this.loading = false
      }
    },
    // 后台管理
    handleLogin() {
      if (this.getIsLogin) {
        if (this.getUser.isAdmin) {
          this.$router.push('/backend')
        } else {
          this.$notify({
            title: '提示',
            message: '您不是管理员，无法访问网站后台',
            type: 'warning'
          })
        }
      } else {
        this.$router.push('/login')
      }
    },
    // 注销
    handleCancellation() {
      this.$confirm('您确定退出登录', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          window.localStorage.removeItem('blogToken')
          this.$store.commit('changeIsLogin', false)
          this.$store.dispatch('SOCKET_LOGOUT') // 注销socket.io的登陆状态
          if (this.$route.path != '/home') {
            this.$router.push('/main/home')
          }
        })
        .catch(() => {})
    },

    // 更改文章排序方式
    selectChange() {
      window.localStorage.setItem('sort', this.value)
      this.$EventBus.$emit('sort', this.value)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../scss/common.scss';
@import './main.scss';
</style>
<style lang="scss">
.el-select {
  width: 135px;
  vertical-align: middle;
}
</style>
